<template>
    <el-dialog @close="cancleEditStep" v-model="dialogVisible" title="编辑步骤信息" destroy-on-close center>
        <template #default>
            <el-form :model="stepItem" label-width="100px" label-position="left">
                <el-form-item label="顺序编号">
                    <el-input v-model="stepItem.processStepCode" aria-placeholder="顺序编号" />
                </el-form-item>
                <el-form-item label="材料URL">
                    <el-input v-model="stepItem.processStepUrl" aria-placeholder="材料URL" />
                </el-form-item>
                <el-form-item label="辅助设备">
                    <el-input v-model="stepItem.processStepDevice" aria-placeholder="辅助设备" />
                </el-form-item>
                <el-form-item label="辅助材料">
                    <el-input v-model="stepItem.processStepMaterial" aria-placeholder="辅助材料" />
                </el-form-item>
                <el-form-item label="步骤说明">
                    <el-input type="textarea" v-model="stepItem.processStepDescription" aria-placeholder="步骤说明" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="stepItem.processStepNotes" aria-placeholder="备注" />
                </el-form-item>
            </el-form>
        </template>
        <!-- footer插槽中放两个按钮 -->
        <template #footer>
            <el-row>
                <el-col :span="12">
                    <el-button type="primary" @click="editStep">确定</el-button>
                </el-col>
                <el-col :span="12">
                    <el-button type="primary" @click="cancleEditStep">取消</el-button>
                </el-col>
            </el-row>
        </template>
    </el-dialog>
</template>
<script>
import { watch } from "vue";
import stepItemRequest from "@/api/processStep.js";
import stepItem from "@/views/pro/process/step/step-item.vue";
export default {
    computed: {
        stepItem() {
            return stepItem
        }
    },
    props: ["visible","processStepId"],
    emits: ["optionCompleted"], // 对外暴露一个事件
    data() {
        return {
            stepItem: {},// 绑定要编辑的操作步骤信息
            dialogVisible: false,// 编辑操作步骤窗口的显示与隐藏
        }
    },
    methods: {
        /**
         * 取消添加操作步骤的事件
         */
        cancleEditStep(){
            // 通知父组件  操作完成，让父组件关闭窗体
            this.$emit("optionCompleted");
        },
        /**
         * 添加操作步骤信息
         */
        editStep(){
            stepItemRequest.updateStep(this.stepItem,res=>{
                if (res.code == '200'){
                    this.$message({
                        type: 'success',
                        message: '编辑操作步骤成功!'
                    });
                    // 通知父组件  操作完成，让父组件关闭窗体

                    this.$emit("optionCompleted");
                }else if(res.code == '300'){
                    this.$message({
                        type: 'warning',
                        message: "操作重复!"
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: '编辑操作步骤失败!'
                    });
                }
            });
            this.loadStep();
        },

        /**
         * 加载操作步骤信息
         */
        loadStep(){
            stepItemRequest.getById(this.processStepId,res=>{
                console.log(res)
                if(res.data != null)
                    this.stepItem = res.data;
            });
        }
    }, mounted(props) {
        this.loadStep()
        // 侦听props   一旦发生变化，就会出发下面的函数
        watch(() => this.visible, (newVal, oldVal) => {
            // 将最新的值设置给弹窗的dialogVisible属性
            this.dialogVisible = newVal;
        });

        watch(() => this.processStepId, (newVal, oldVal) => {
            // processStepId 发生变化，重新加载字典信息
            this.loadStep();
        });
    }
}
</script>